<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>产品信息展示</title>
    <link rel="stylesheet" href="../static/bootstrap.min.css" th:href="@{/webjars/bootstrap/3.3.5/css/bootstrap.css}" />
    <script type="text/javascript" src="../static/jquery-1.9.1.min.js" th:src="@{webjars/jquery/1.9.1/jquery.min.js}"></script>
    <script type="text/javascript" src="../static/bootstrap.min.js" th:src="@{/webjars/bootstrap/3.3.5/js/bootstrap.js}"></script>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .h10{
        width: 100%;
        height:10px;
    }
    .contin{
        width:80%;
        margin: 0 auto;
    }
    .top{
        padding-left: 15%;

    }
    .img-info{
        display: block;
        width: 200px;
        height:150px;
    }
    td{
        height:160px;
    }
</style>
<body>

<div th:replace="bar::#nav(activeUri='product.html')"></div>
<div class="h10"> </div>
<div class="contin">
    <div class="row top">
        <div class="col-md-4">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">按功能查找</a></li>
                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">按厂家查找</a></li>
            </ul>

            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="home">
                    <div class="input-group row ">
                        <div class="col-md-3">
                            <select class="f">
                                <option>半导体器件</option>
                                <option>模块产品</option>
                                <option>开关/继电器</option>
                                <option>连接器及组件</option>
                                <option>电线电缆</option>
                                <option>总线组件</option>
                                <option>微波射频</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="f" id="init">
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="f">
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="f">
                            </select>
                        </div>
                    </div>
                </div>

                <div role="tabpanel" class="tab-pane fade" id="profile">
                    <div class="input-group row ">
                        <div class="col-md-3">
                            <select class="">
                                <option>西安微电子所</option>
                                <option>北京</option>
                                <option>杭州</option>
                                <option>桂林</option>
                                <option>郑州</option>
                                <option>湖北</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="">
                                <option>半导体器件</option>
                                <option>模块产品</option>
                                <option>开关继电器</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="">
                                <option>sip</option>
                                <option>soc</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select class="">
                                <option>系统集成</option>
                                <option>分立器件</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6">
                    <input type="text" class="form-control" placeholder="关键字搜索" />
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn btn-default">搜索</button>
                </div>
            </div>
        </div>
    </div>
    <!--<div class="sele" th:replace="sel::.sele"></div>-->
    <form action="/compare" method="get" id="form">
        <div class="sele">
            <div class="info-content" >
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>图片</th>
                        <th>型号</th>
                        <th>厂商</th>
                        <th>简介</th>
                        <th>操作</th>

                    </tr>
                    </thead>
                    <tbody id="tbody">
                    <tr th:each="info : ${infos}">
                        <td width='200px' height='150px'><img class='img-info' th:src='@{/image/tesr01.JPG}' /></td>
                        <td width='200px' height='250px' th:text="${info.modelname}">SGD020FFE</td>
                        <td width='200px' height='250px' th:text="${info.fullname}" >西安航空所</td>
                        <td width='800px' height='250px' th:text="${info.content}">这怒地犯法戴安路做出相当多的优化，还啥都死哦飞机客户舒服多了；</td>
                        <td>
                            <button type='button' class='btn btn-default'>收藏</button>
                            <div class='checkbox'><label><input type='checkbox' name="compare" value="" th:value="${info.pid}"/> 对比 </label></div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn btn-default" type="button" id="compare" > 对比</button>
        </div>
    </form>
</div>

<script type="text/javascript">
    var $initSelect = $("#init")
    getData("半导体器件",$initSelect);
    $(".f").change(function () {
      var $name = $(this).val()
      var $nextSelect = $(this).parent().next("div").children().first();
        $nextSelect.empty()
        getData($name,$nextSelect)
    })


   function getData($name,$nextSelect) {
       $.ajax({
           "url": "/getproductbyparentname",
           "type": "get",
           "dataType":"JSON",
           "data": "parentName="+$name+"",
           "success": function (data) {
               if(data.length==0){
                window.location.href="/getproductdetilbyname?cName="+$name+"";
               }
               for (i in data) {
                   var nextName = data[i].cname
                   $nextSelect.append("<option>"+nextName+"</option>")
               }
           },
           "error": function () {
               console.log("失败...");
           }
       });
   }
</script>

<script type="text/javascript">
    $("#compare").click(function () {
        var check = $('input:checkbox:checked')
        if( check.length>2 ){
            alert("最多选二个")
        }
        else{
            $("#form").submit()
        }
    });
</script>
</body>
</html>